<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
    <head>
        <title>Elements - Systems</title>
        <link rel="stylesheet" href="css/test.css" type="text/css" />
        <script type="text/javascript" src="js/jquery.js"></script>
      	<script type="text/javascript">

        function log(text)
        {
            $(".log").append(text+"<br>");
        }

        function setContentCallback(container,data)
        {
            var items = data.split('|');
            $(".carousel-content").each(function(i){
                this.innerHTML = items[i]+' @'+(this.parentNode.start);
            });
        }

        var start = 0;

        function scrollContent(container,offset)
        {
            start = start + offset;
            last = start + 3;
            container.start = start;
            
            $.get("example_dynamic_ajax.txt?start="+start+"&last="+last, function(data) {
                setContentCallback(container, data);
            });
        }

     	$(document).ready(function(){
            /**
             * We show a simple loading indicator
             * using the jQuery ajax events
             */
            $().ajaxStart(function() {
                $(".loading").show();
            });

            $().ajaxStop(function() {
                $(".loading").hide();
            });

            $(".carousel-first").click(function() {
                scrollContent(this.parentNode,-5);
            });
            $(".carousel-second").click(function() {
                scrollContent(this.parentNode,-1);
            });
            $(".carousel-last").click(function() {
                scrollContent(this.parentNode,5);
            });
            $(".carousel-penult").click(function() {
                scrollContent(this.parentNode,1);
            });
            scrollContent($(".carousel-list").get(),0);
        });
        </script>
    </head>

    <body>
        <div class="loading"><img src="images/loading.gif"></div>
        <fieldset>
            <legend>
                Systems configuration
            </legend>
            <ul class="carousel-list" start="0">
                <li class="carousel-first">...</li>
                <li class="carousel-second">...</li>
                <li class="carousel-content">1</li>
                <li class="carousel-content">2</li>
                <li class="carousel-content">3</li>
                <li class="carousel-penult">...</li>
                <li class="carousel-last">...</li>
            </ul>
        </fieldset>
        <div class="log"></div>
    </body>
</html>
